<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title>Layabox</title>
		<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./assets/css/animate.min.css" />
		<link rel="stylesheet/less" href="./assets/css/reset.less" />
		<link rel="stylesheet/less" href="./assets/css/common.less" />
		<link rel="stylesheet/less" href="./assets/css/index.less" />
	</head>
	<body>
		<!-- 头部 -->
		<header class="header">
			<nav class="navbar navbar-inverse">
				<div class="container">
					<!-- 移动端导航栏 -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">
                           <img src="../hhhhhh/assets/images/Layabox-Laya家族7_03.png"></a>
						
					</div>
					<!-- 导航栏 -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
							<li><a href="family.html" class='wow fadeInDown ' data-wow-delay='0ms'>Laya家族</a></li>
							<li><a href="games.html" class='wow fadeInDown ' data-wow-delay='50ms'>游戏</a></li>
							<li><a href="news.html" class='wow fadeInDown ' data-wow-delay='100ms'>新闻动态</a></li>
							<li><a href="#" class='wow fadeInDown ' data-wow-delay='150ms'>开发者中心</a></li>
							<li><a href="#" class='wow fadeInDown ' data-wow-delay='200ms'>开发者社区</a></li>
							<li><a href="#" class='wow fadeInDown ' data-wow-delay='250ms'>开放平台</a></li>
							<li><a href="about.html" class='wow fadeInDown ' data-wow-delay='300ms'>关于我们</a></li>
						</ul>
						<ul class="nav navbar-nav navbar-right">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
									aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
	
<div class="demo">
    <div class="conteiner">
        <div class="key wow fadeInUp" data-wow-delay="100ms">新闻动态</div>
        <div class="key2">
            <div class="key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态888_03.png"><p>技术突破:HTML5裸跑性能已可媲美APP</p></div>
            <div class="key wow fadeInUp" data-wow-delay="300ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态888_03.png"><p>HTML5干货:LSYSWORLD TFC秋季特刊</p></div>
            <div class="key wow fadeInUp" data-wow-delay="400ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态888_03.png"><p>幕和:手游大作《魔卡幻想》为何移植HTML5</p></div>
        </div>
    </div>
</div>

<div class="demo2">
         <div class="conteiner">
                 <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
                 <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                     <ul>
                         <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                         <li>2016-02-25</li>
                         <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                            HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                     </ul>
                     <div class="hr3 key wow fadeInUp" data-wow-delay="200ms" >查看详情</div>
             </div>  
     
    </div>
</div>

<div class="demo3">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo4">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo5">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo6">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo7">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo9">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo10">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo11">
    <div class="conteiner">
            <div class="hr key wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-新闻动态666_03.png"></div>
            <div class="hr2 key wow fadeInUp" data-wow-delay="200ms">
                <ul>
                    <li>技术突破: HTML5裸跑性能已可媲美APP</li>
                    <li>2016-02-25</li>
                    <li>Layaboxit划在3月限量内测的L .ayaAir引擎,通过在低端机型上的性能实测以及即将上线的大型裸跑游戏,证明了
                       HTML 5裸跑性能已可媲美APP ,性能问题将不再成为制约产业发展的瓶颈。</li>
                </ul>
                <div class="hr3 key wow fadeInUp" data-wow-delay="200ms">查看详情</div>
        </div>  

</div>
</div>

<div class="demo12 key wow fadeInUp" data-wow-delay="300ms"> 
    <div class="conteiner">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">上一页</button>
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
            <button type="button" class="btn btn-default">下一页</button>
          </div>
    </div>
</div>

<div class="demo13">
    <div class="coteiner">
        <div class="nn">
            <ul class="jj5">
            <div class="jj  wow fadeInUp" data-wow-delay="100ms">公司简介</div>
            <div class="jj2  wow fadeInUp" data-wow-delay="200ms">联系方式</div>
            <div class="jj3  wow fadeInUp" data-wow-delay="300ms">人才招聘</div>
            </ul>
            <div class="jj4 wow fadeInUp" data-wow-delay="400ms">All Copyright Reserved by Latabox Inc. 京ICP备15008153号-1</div>
        </div>
        <div class="nn2">
            <div class="nn3 wow fadeInRightBig" data-wow-delay="100ms"><img src="../hhhhhh/assets/images/Layabox-Laya家族7777_01_03.png"></div>
            <div class="nn4 wow fadeInRightBig" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-Laya家族8888_03.png"></div>
            <div class="nn5 wow fadeInRightBig" data-wow-delay="300ms"><img src="../hhhhhh/assets/images/Layabox-Laya家族999_03.png"></div>
        </div>
    </div>
</div>
</body>
</html>
<!-- 引入jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入解析less的插件 -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入懒加载的插件 -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    //懒加载初始化
    new WOW().init()

    //给页面绑定一个监听滚动条变化的事件
    $(document).scroll(function () {
        //获取到拉动一个距离
        var distance = $(this).scrollTop()

        //当前滚动条的值只要是大于10px 就给导航条添加背景色
        if (distance > 10) {
            $("#header").css({ "backgroundColor": "#111111", paddingBottom: 0 })
            $("#gotop").css({ zIndex: 99998, opacity: 1 })
        } else {
            //小于等于10
            $("#header").css({ 'backgroundColor': 'transparent', paddingBottom: '0em' })
            $("#gotop").css({ zIndex: -99998, opacity: 0 })
        }
    })


    //锚点的缓动效果 给特定链接元素 绑定点击事件
    $("#back a,.menu a,#banner a,.logo").click(function () {
        // console.log()
        //获取链接地址上面的路径部分(不包含域名)
        // location.pathname
        //replace 替换
        // 正则表达式 /^\// ^ 以....开始  \(转义) /
        // console.log(location.pathname) 系统的路径
        // console.log(location.pathname.replace(/^\//, '')) //系统替换的路径
        // this 你点击的是谁 他就是那个元素  点击 a元素 this == a 
        // console.log(this) //当前元素
        // console.log(this.pathname)  点击当前元素所跳转链接的路径
        // console.log(this.pathname.replace(/^\//, ''))  当前元素所跳转链接替换后的路径

        // console.log(location.hostname)  //系统获取域名部分
        // console.log(this.hostname)  //当前元素所跳转链接的域名部分

        //系统替换后的结果
        var LocationReplace = location.pathname.replace(/^\//, '')
        var CurrentReplace = this.pathname.replace(/^\//, '')

        //系统获取的域名部分
        var LocationHostname = location.hostname
        var CurrentHostname = this.hostname

        //true 真 结果一样 false 结果不一样
        // console.log(LocationReplace == CurrentReplace)
        // console.log(LocationHostname == CurrentHostname)
        // && 两个条件必须同时为真 才返回 true  否则false
        // console.log(true && false) //逻辑不短路 第一个为真 不代表第二个就为真 所以后面还要正常执行
        // console.log(false && false) //逻辑短路不执行

        //判断你跳转的链接 是不是在当前界面

        // http://www.baidu.com
        // http://www.baidu.com/#top 
        // http://www.taobao.com/#top 

        //你必须是跳转到当前界面的链接  才能做锚点
        if (LocationReplace == CurrentReplace && LocationHostname == CurrentHostname) {
            //获取将要跳转的锚点位置
            var $target = $(this.hash)

            //一定要当他找到锚点元素的时候，才跳转锚点
            if ($target.length > 0) {
                //获取目标元素的位置
                var pos = $target.offset().top

                //让页面的body和html 滚动到 pos这个位置
                $("html,body").animate({
                    //指的就是滚动条的距离
                    scrollTop: pos
                }, 1000)
            }

            //阻止刷新界面
            return false

        }



    })



</script>